<template>
  <el-popover
    trigger="click"
    :width="300"
    placement="bottom"
  >
    <!-- 弹出层 el-popover 的默认插槽 -->
    <template #default>
      <slot></slot>
      <!-- m-notification 组件向外部暴露的默认插槽 -->
      <!-- 作用是：将“外部传入的内容” 放入 el-popover 的 #default 插槽中 -->
    </template>
    <template #reference>
      <el-badge :value="count" :max="max" :is-dot="isDot">
        <component :is="`el-icon-${toLine(icon)}`"></component>
      </el-badge>
    </template>
  </el-popover>
</template>

<script setup lang="ts">
import { toLine } from "@/utils";

let props = defineProps({
  // 图标名称
  icon: {
    type: String,
    default: "Bell",
  },
  // 图标数量
  count: {
    type: [Number, String],
    default: 0,
  },
  // 图标数量最大值
  max: {
    type: [Number, String],
    default: 99,
  },
  // 是否显示点
  isDot: {
    type: Boolean,
    default: false,
  },
});
</script>

<style scoped lang="scss"></style>
